<template>
    <div>
        <el-dialog
            title="审核确认"
            center
            :visible.sync="visible"
            @close="visible = false"
            width="610px"
        >
            <el-form
                ref="form"
                :model="form"
                v-if="visible"
                :rules="formRules"
                label-width="120px"
            >
                <el-form-item
                    label="审核结果"
                >
                    <span v-if="form.status === 1" style="color:#67c23a;font-size: 16px;"> 审核通过 </span>
                    <span v-else style="color:red; font-size: 16px;"> 审核拒绝 </span>
                </el-form-item>
                <el-form-item
                    v-for="(conf, prop) in _remarkItems"
                    :label="conf.label"
                    :prop="prop"
                    
                >
                    <el-input
                        v-model.trim="form[prop]"
                        clearable
                        type="textarea"
                        :maxlength="500"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 4 }"
                        style="width: 380px"
                        :placeholder="$t('common.please_enter')"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">
                    {{ $t('common.cancel') }}
                </el-button>
                <el-button type="primary" @click="handleOk">
                    {{ $t('common.submit') }}
                </el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="二次确认"
            center
            @close="confirmVisible = false"
            :visible.sync="confirmVisible"
            width="610px"
        >
            <el-form
                ref="form"
                label-width="120px"
            >
                <el-form-item
                    label="审核结果"
                >
                    <span v-if="form.status === 1" style="color:#67c23a;font-size: 16px;"> 审核通过 </span>
                    <span v-else style="color:red; font-size: 16px;"> 审核拒绝 </span>
                </el-form-item>
                <el-form-item
                    v-for="(conf, prop) in _remarkItems"
                    :label="conf.label"
                    prop="remark"
                >
                    {{ form[prop] }}
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">
                    {{ $t('common.cancel') }}
                </el-button>
                <el-button type="primary" @click="handleSubmit">
                    {{ $t('common.submit') }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

export default {
    name: 'AuditConfirm',
    props: {
        submit: {
            type: Function,
            default: undefined
        },
        remarkItems: {
            type: Object,
            default: undefined
        }
    },
    data() {
        return {
            visible: false,
            confirmVisible: false,
            form: {
				remark: undefined,
                clientRemark: undefined,
                status: 1,
			},
        }
    },
    computed: {
      isSuccess() {
         return  this.status === 1
      },
      formRules() {
        const defRule = [
            {
                required: true,
                message: this.$t('member.greater_than2'),
                trigger: 'blur'
            },
            {
                min: 2,
                max: 500,
                message: this.$t('member.greater_than2'),
                trigger: 'blur'
            }
        ]

        if (this.remarkItems) {
            const rules = {}
            Object.keys(this.remarkItems).forEach(k => {
                rules[k] = [...defRule]
            })
            return rules
        }

        return {
            remark: [...defRule]
        }
      },
      _remarkItems() {
        if (this.remarkItems) {
            return this.remarkItems
        }

        return {
            remark: {
                label: '审核备注'
            }
        }

      }
    },
    methods: {
        resetForm() { 
          setTimeout(() => {
            this.$refs.form.resetFields()  
          }, 50)
        },
        closeDialog() {
            this.visible = false
            this.confirmVisible = false
        },
        successOpen() {
            this.visible = true
            this.form.status = 1
            this.form.clientRemark = undefined
            this.form.remark = undefined
            this.resetForm()
        },
        dangerOpen () {
            this.visible = true
            this.form.status = 2
            this.form.clientRemark = undefined
            this.form.remark = undefined
            this.resetForm()
        
        },
        async handleOk () {
            try {
                const f = await this.$refs.form.validate()
                if (f) {
                    this.visible = false
                    this.confirmVisible = true      
                }
               
            } catch (err) {
                throw err
            }
        },

        async handleSubmit() {
            if (this.submit) {
               await this.submit(this.form)
            }
            this.closeDialog()
        }
    }
}

</script>

